<!--
Copyright (c) 2024 Industrial Shields. All rights reserved

This file is part of node-red-librpiplc.

node-red-librpiplc is free software: you can redistribute
it and/or modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation, either version
3 of the License, or (at your option) any later version.

node-red-librpiplc is distributed in the hope that it will
be useful, but WITHOUT ANY WARRANTY; without even the implied warranty
of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->

<script type="text/javascript">
	RED.nodes.registerType("rpiplc-config", {
		category: "config",
		defaults: {
			isCustom: { value: false, required: true },
			version: { value: "" },
			model: { value: "" },
			name: { value: "" },
			prettyName: { value: "" }
		},
		label: function() {
			if (this.isCustom) {
				return this.name || "Custom";
			}
			else {
				if (this.name) {
					return this.name;
				}
				// Can't access selectElement when label is changed...
				const versionSelectElement = document.getElementById('node-config-input-version');
				if (versionSelectElement) {
					const version = Array.from(versionSelectElement.options).find(
						option => option.value === this.version).text;
					if (version.startsWith("RPi PLC")) {
						// Insert model in between if it's a Raspberry PLC
						const modelSelectElement = document.getElementById('node-config-input-model');
						const model = Array.from(modelSelectElement.options).find(
							option => option.value === this.model).text;
						this.prettyName = version.slice(0, 8) + model + version.slice(7);
					}
					else {
						this.prettyName = version;
					}
				}

				return this.prettyName;
			}
		},

		oneditprepare: function() {
			const hideVersionDiv = $("#hide-node-config-input-version");
			const hideModelDiv = $("#hide-node-config-input-model");
			const inputIsCustom = $("#node-config-input-isCustom");
			const inputVersion = $("#node-config-input-version");
			const inputModel = $("#node-config-input-model");

			function updateIsCustom() {
				const version = inputVersion.val();
				const model = inputModel.val();
				this.isCustom = inputIsCustom.is(":checked");
				if (!this.isCustom) {
					if (!version || version === "CUSTOM") {
						inputVersion.val("RPIPLC_V6");
						inputModel.val("RPIPLC_21");
					}
					hideVersionDiv.show();
					hideModelDiv.show();
				}
				else {
					inputVersion.val("CUSTOM");
					inputModel.val("CUSTOM");
					hideVersionDiv.hide();
					hideModelDiv.hide();
				}
			};
			updateIsCustom();
			inputIsCustom.on("click", updateIsCustom);

			function updateModelHideDiv() {
				const version = inputVersion.val();
				const model = inputModel.val();
				if (version.startsWith("RPIPLC")) {
					hideModelDiv.show();
					if (!model.startsWith("RPIPLC")) {
						inputModel.val("RPIPLC_21");
					}
				}
				else {
					hideModelDiv.hide();
					const newModel = version.split(/_V\d+/)[0];
					inputModel.val(newModel);
				}
			}
			updateModelHideDiv();
			inputVersion.on("change", updateModelHideDiv);
		},
	});
</script>

<script type="text/x-red" data-template-name="rpiplc-config">
  	<div class="form-row">
		<label for="node-config-input-name"><i class="fa fa-tag"></i> Name</label>
		<input type="text" id="node-config-input-name" placeholder="Name">
	</div>
	<div class="form-row">
		<label><i class="fa fa-cog"></i> Custom</label>
        	<input type="checkbox" id="node-config-input-isCustom" style="display: inline-block; width: auto; vertical-align: top;" autocomplete="off">
        	<label style="width: auto;" for="node-config-input-isCustom"> Select through "plc set config" node</label>
	</div>
	<div class="form-row" id="hide-node-config-input-version">
		<label for="node-config-input-version">Version</label>
		<select id="node-config-input-version">
			<option value="RPIPLC_V6">RPi PLC V6</option>
			<option value="RPIPLC_V4">RPi PLC V4</option>
			<option value="RPIPLC_V3">RPi PLC V3</option>
			<option value="UPSAFEPI_V6">UPSafePi V6</option>
			<option value="GATEBERRY_V9">GateBerry V9</option>
			<option value="TOUCHBERRY_PI_V1">TouchBerry Pi V1</option>
			<option hidden value="CUSTOM"></option>
		</select>
	</div>
	<div class="form-row" id="hide-node-config-input-model">
		<label for="node-config-input-model">Model</label>
		<select id="node-config-input-model">
			<option value="RPIPLC_19R">19R</option>
			<option value="RPIPLC_21">21</option>
			<option value="RPIPLC_38AR">38AR</option>
			<option value="RPIPLC_38R">38R</option>
			<option value="RPIPLC_42">42</option>
			<option value="RPIPLC_50RRA">50RRA</option>
			<option value="RPIPLC_53ARR">53ARR</option>
			<option value="RPIPLC_54ARA">54ARA</option>
			<option value="RPIPLC_57AAR">57AAR</option>
			<option value="RPIPLC_57R">57R</option>
			<option value="RPIPLC_58">58</option>
			<option hidden value="UPSAFEPI"></option>
			<option hidden value="GATEBERRY"></option>
			<option hidden value="TOUCHBERRY_PI"></option>
			<option hidden value="CUSTOM"></option>
		</select>
	</div>
</script>

<script type="text/x-red" data-help-name="rpiplc-config">
  <p>
    <b>PLC Configuration</b>
  </p>
  <p>
    Set both the version and model of the PLC in which Node-RED is running. Or, if you want to set
    the PLC configuration programmatically, check <strong>Select through "plc set config"
    node</strong> and follow the documentation of the
    <a href="https://github.com/Industrial-Shields/node-red-librpiplc/tree/new-pins-enum?tab=readme-ov-file#plc-set-configuration">
    PLC set config</a> node.</p>
  <p>
    <b>WARNING</b>
  </p>
  <p>
    You should only have <strong>ONE configuration node</strong>, because they can interfere with
    each other when configuring the C library.
  </p>
</script>
